<template>
  <ContentField>
    <a-row justify="center">
      <a-col :span="12">
        <div class="center">
          <h1>注册</h1>
        </div>
      </a-col>
      <a-col :span="13">
        <img
          src="https://img.zcool.cn/community/0156b25b2a647fa8012034f73c0cec.jpeg@1280w_1l_2o_100sh.jpg"
          alt="icon"
        />
      </a-col>
      <a-col :span="12">
        <a-row justify="center">
          <a-col :span="24">
            <a-input v-model:value="user.username" placeholder="用户名">
              <template #prefix>
                <user-outlined type="user" />
              </template>
            </a-input>
          </a-col>
          <a-col :span="24"><br /></a-col>
          <a-col :span="24">
            <a-input-password
              v-model:value="user.password"
              placeholder="密码"
            />
          </a-col>
          <a-col :span="24"><br /></a-col>

          <a-col :span="24">
            <a-input-password
              v-model:value="user.checkPassword"
              placeholder="确认密码"
            />
          </a-col>

          <a-col :span="24"><br /></a-col>

          <a-col :span="24">
            <a-button type="primary" @click="register" block>注册</a-button>
          </a-col>
        </a-row>
      </a-col>
    </a-row>
  </ContentField>
</template>
<script>
import { UserOutlined } from "@ant-design/icons-vue";
import ContentField from "@/components/ContentField";
import { reactive } from "@vue/reactivity";
import userApi from '@/apis/userApi';
import { message } from 'ant-design-vue';
import router from '@/router';
export default {
  name: "LoginView",
  components: {
    UserOutlined,
    ContentField,
  },
  setup() {
    let user = reactive({
      username: "",
      password: "",
      checkPassword: ""
    });


    const register = () => {
        userApi.register(user).then((resp) => {
            if(resp.code === 200){
              message.info("注册成功");
              router.push({ name: "login" });
            }
        })
    }


    return {
      user,
      register
    };
  },
};
</script>

<style scoped>
img {
  width: 100%;
}
div.center {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>